<template>
  <div class="content">
    <div class="group" :class="{ 'noFacility': !facilityName }">
      <div class="group-title">
        <span v-if="facilityName">
          当前选择区域：
          <span style="color: #37F6F0;">{{ facilityName }}</span>
        </span>
        <span class="back" @click="back">返回</span>
      </div>
      <div class="control-box">
        <div class="zh-contro" v-for="item,index in operationList" :key="index">
          <div class="contro-one">
            <div class="contro-one-title">{{ item.dataItemName }}</div>
            <div
              class="contro-one-stau"
              :style="{ color: getequipmentStyle(item.nowstau) }"
            >{{ item.nowstau }}</div>
          </div>
          <div class="contro-two">
            <div
              v-for="(
                kaiguanitem, kaiguanindex
              ) in handeltwo(item.enumListType)"
              :key="kaiguanindex"
              class="contro-two-zcon"
              :class="{ 'close': kaiguanitem.name.includes('关') }"
              @click="
                controlequpmentone(
                  item.dataItemId,
                  kaiguanitem.value,
                )
              "
            >
              {{ kaiguanitem.name }}
            </div>
          </div>
        </div>
        <div class="nodata" v-if="operationList.length == 0">
          暂无数据
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    operationList: {
      type: Array,
      default: () => {
        return []
      }
    },
    facilityName: {
      type: String,
      default: () => {
        return ''
      }
    },
  },
  data() {
    return {
      
    }
  },
  created () {
    
  },
  mounted () {
    
  },
  methods: {
    // 获取机器状态,返回不同颜色
    getequipmentStyle(nowstau) {
      if (nowstau == "已关闭") {
        return "#ff0000";
      }
      if (nowstau == "已开启") {
        return "#00ff33";
      }
      if (nowstau == "执行中") {
        return "#00b6ff";
      }
    },
    handeltwo (str) {
      if (!str) return []
      let controlslist = [];
      let arr = str.split(";");
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].length > 0) {
          let diy = arr[i].split(":");
          controlslist.push({
            name: diy[1],
            value: diy[0]
          });
        }
      }
      return controlslist;
    },
    // 存储数据并且弹出验证码弹框
    controlequpmentone(id, key) {
      let param = {
        zhid: id,
        zhkey: key,
      };
      this.$emit('openCode', param)
    },
    back () {
      this.$emit('back')
    },
  }
}
</script>

<style scoped lang="scss">
.content {
  padding: 10px;
  height: 100%;
  overflow: hidden auto;
  .group {
    height: 100%;
    margin-bottom: 15px;
    &:last-child {
      margin-bottom: 0;
    }
    &.noFacility {
      .group-title {
        background: transparent;
        height: 30px;
        .back {
          top: 0;
        }
      }
      .control-box {
        height: calc(100% - 50px);
      }
    }
    .group-title {
      height: 70px;
      line-height: 70px;
      font-size: 16px;
      background: #025569;
      margin-bottom: 15px;
      position: relative;
      padding-left: 20px;
      ::v-deep .el-checkbox__label {
        color: #fff;
      }
    }
    .all-control {
      display: inline-block;
      width: 120px;
      height: 100px;
      margin-right: 15px;
      vertical-align: top;
      padding-top: 15px;
      .contro-two-zcon {
        margin: 0 0 15px 0;
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
    .control-box {
      display: inline-block;
      width: 100%;
      height: calc(100% - 90px);
      overflow: hidden auto;
    }
  }
  .zh-contro {
    display: inline-block;
    width: 300px;
    height: 120px;
    background: #025569;
    text-align: left;
    margin: 0 15px 15px 0;
    .contro-one {
      display: inline-block;
      width: 100%;
      padding: 10px;
      display: flex;
      padding-top: 20px;
      .contro-one-title {
        font-size: 16px;
        width: calc(100% - 90px);
        height: 36px;
        margin-bottom: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .contro-one-stau {
        width: 80px;
        font-size: 17px;
      }
    }
    .contro-two {
      display: inline-block;
      width: 100%;
      padding-left: 35px;
      position: relative;
      .contro-two-zcon:first-child {
        margin-bottom: 8px;
      }
    }
  }
  .nodata {
    text-align: center;
    padding: 5px;
  }
}
.contro-two {
  .contro-two-zcon {
    display: inline-block;
    margin-right: 30px;
    height: 30px;
    min-width: 100px;
    line-height: 28px;
    text-align: center;
    font-size: 16px;
    border-radius: 15px;
    cursor: pointer;
    background: #0DD4C5;
    color: #000;
    &.close {
      background: #004758;
      color: #fff;
    }
  }
}
.back {
  background: linear-gradient(to bottom, #00C4B5, #0097C4);
  height: 34px;
  line-height: 34px;
  border-radius: 17px;
  position: absolute;
  top: 18px;
  right: 15px;
  padding: 0 20px;
  cursor: pointer;
}
</style>